<template>
  <div class="member-manage page">
    <van-nav-bar
        title="会员管理"
        left-arrow
        @click-left="$router.back()"
    />
    <div class="wrapper">
      <form action="/">
        <van-search v-model="username" placeholder="请输入会员名" @click="initData">
          <template #right-icon>
            <span>查询</span>
          </template>
        </van-search>
      </form>
      <div class="title">
        <div class="username">会员名</div>
        <div class="agent">余额</div>
        <div class="operator">操作</div>
      </div>
      <div class="list">
        <van-pull-refresh style="height: 100%; overflow-y: scroll" v-model="refresh" success-text="刷新成功" @refresh="onRefresh">
          <template #default>
            <van-list style="height: 100%" class="listcontainer" v-model="loading" :finished="list.length >= total"
                      @load="getNextData">
              <template #default>
                <div class="list-item van-hairline--bottom" v-for="item in list" :key="item.id">
                  <div class="username">{{ item.username }}</div>
                  <div class="agent">{{ item.money }}</div>
                  <div class="operator">
                    <div class="btn-left" @click="gotoReport(item.username)">
                      <div class="button">报表</div>
                    </div>
                    <div class="btn-right" @click="gotoDetail(item)">
                      <div class="button">详情</div>
                    </div>
                    <i class="van-badge__wrapper van-icon van-icon-arrow right-arrow">
                    </i></div>
                </div>
              </template>
              <template #loading>
                没有更多了
              </template>
              <template #finished>
                没有更多了
              </template>
            </van-list>
          </template>
        </van-pull-refresh>
      </div>
    </div>
    <div class="van-overlay" v-if="nowDetail" style="z-index: 2002; background-color: rgba(0, 0, 0, 0.5);"></div>
    <div class="van-popup van-popup--round van-popup--bottom" v-if="nowDetail" style="z-index: 2003">
      <div class="popup-box">
        <div class="content">
          <div class="user-title van-hairline--bottom">
            <van-image :src="nowDetail.header_img" round style="width: 40px; height: 40px;"/>
            <div class="span">{{ nowDetail.username }}</div>
          </div>
          <div class="user-detail">
<!--            <div class="row">-->
<!--              <div class="label">代理返点:</div>-->
<!--              <div class="value">100%(1000)</div>-->
<!--            </div>-->
            <div class="row">
              <div class="label">账户积分:</div>
              <div class="value">{{ nowDetail.money }}</div>
            </div>
            <div class="row">
              <div class="label">信誉分:</div>
              <div class="value">{{ nowDetail.score }}</div>
            </div>
            <div class="row">
              <div class="label">个人充值:</div>
              <div class="value">{{ nowDetail.rukuan_money }}</div>
            </div>
            <div class="row">
              <div class="label">个人提款:</div>
              <div class="value">{{ nowDetail.chukuan_money }}</div>
            </div>
            <div class="row">
              <div class="label">最后登录时间:</div>
              <div class="value">{{ new Date(nowDetail.update_time * 1000).format("yyyy-MM-dd HH:mm:ss") }}</div>
            </div>
            <div class="row">
              <div class="label">当前在线状态:</div>
              <div class="value">{{ nowDetail.last_time ? '在线' : '离线' }}</div>
            </div>
            <div class="row">
              <div class="label">离线天数:</div>
              <div class="value">{{ nowDetail.offline_day }}</div>
            </div>
          </div>
        </div>
      </div>
      <i class="van-badge__wrapper van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
         role="button" tabindex="0" @click="nowDetail = undefined"></i></div>
  </div>
</template>
<script>
import {subUserList} from "@api/Agent";

export default {
  name: "AgentMember",
  data: function () {
    return {
      loading: false,
      finished: true,
      refresh: false,
      username: undefined,
      page: 1,
      limit: 20,
      total: 0,
      list: [],
      nowDetail: undefined,
    }
  },
  created() {
    this.initData();
  },
  methods: {
    initData: function () {
      this.page = 1;
      subUserList(this.username, this.page, this.limit).then(v => {
        this.loading = false;
        this.refresh = false;
        this.list = v.data.data;
        this.total = v.data.total;
      })
    },
    getNextData: function () {
      this.page++;
      subUserList(this.username, this.page, this.limit).then(v => {
        this.loading = false;
        this.refresh = false;
        this.list = this.list.concat(v.data.data);
      })
    },
    onRefresh: function () {
      this.finished = false;
      setTimeout(() => {
        this.refresh = false;
        this.loading = false;
        this.finished = true;
      }, 1000);
    },
    gotoDetail: function (detail) {
      this.nowDetail = detail;
    },
    gotoReport: function (username){
      this.$router.push({
        name: 'AgentReport',
        query: {
          username
        }
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-nav-bar__left > i, ::v-deep .van-nav-bar__text, ::v-deep .van-nav-bar__title, ::v-deep .van-cell__title {
  color: var(--van-nav-bar-icon-color);
}

.van-popup__close-icon--top-right {
  color: #cacaca
}

.van-popup--bottom {
  background-color: #fcf0fa
}

.member-manage {
  bottom: 0;
  background-color: #fff
}

.member-manage .van-nav-bar {
  background: linear-gradient(90deg, #fff, #fff)
}

.member-manage .van-icon-search {
  color: #979799
}

.member-manage .wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100% - 1.22667rem);
  background-color: #f4ebf3
}

.member-manage .wrapper .title {
  height: 1.33333rem;
  background-color: #fa59b5;
  color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: .32rem;
  text-align: center
}

.member-manage .wrapper .title .agent, .member-manage .wrapper .title .username {
  padding: 0 .05333rem;
  width: 28%
}

.member-manage .wrapper .title .operator {
  padding: 0 .05333rem;
  width: 40%
}

.member-manage .wrapper .list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #f5dcf1
}

.member-manage .wrapper .list .list-item {
  display: flex;
  align-items: center;
  height: 1.33333rem;
  text-align: center;
  font-size: .32rem;
  color: #000
}

.member-manage .wrapper .list .list-item .agent, .member-manage .wrapper .list .list-item .username {
  padding: 0 .05333rem;
  width: 28%
}

.member-manage .wrapper .list .list-item .operator {
  display: flex;
  flex-direction: row;
  width: 42%
}

.member-manage .wrapper .list .list-item .operator .button {
  display: flex;
  flex-direction: row;
  width: 1.70667rem;
  height: .64rem;
  margin: .10667rem .10667rem;
  padding: .05333rem .53333rem;
  vertical-align: middle;
  text-align: center;
  line-height: .53333rem;
  color: #fff;
  font-size: .26667rem;
  font-weight: bolder;
  background: #07c160;
  border-radius: .08rem
}

.member-manage .wrapper .list .list-item .operator .right-arrow {
  text-align: center;
  margin: .26667rem .05333rem;
  color: #979899
}

.member-manage .popup-box .content {
  display: flex;
  flex-direction: column;
  margin: .53333rem .53333rem
}

.member-manage .popup-box .content .user-title {
  display: flex;
  flex-direction: row;
  margin: .13333rem .13333rem;
  padding-bottom: .26667rem
}

.member-manage .popup-box .content .user-title .span {
  color: #979799;
  font-size: .4rem;
  margin-left: .4rem;
  margin-top: .4rem
}

.member-manage .popup-box .content .user-detail {
  font-size: .37333rem;
  margin: .26667rem .26667rem
}

.member-manage .popup-box .content .user-detail .row {
  display: flex;
  flex-direction: row;
  padding: .10667rem 0;
  color: #ff253f
}

.member-manage .popup-box .content .user-detail .row .label {
  color: #979799;
  margin: 0 .05333rem;
  width: 35%
}

.member-manage .popup-box .content .user-detail .row .value {
  float: left;
  text-align: left;
  margin-left: .53333rem;
  justify-content: rights
}

</style>
